<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('商品详情页面')" />
</head>
<body>
    <div class="main-content">
        <div class="ibox float-e-margins">
            <div class="ibox-title  back-change">
                <h5>商品详细信息</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content ">
                                <div class="carousel slide" id="carousel2">
                                    <ol class="carousel-indicators" id="imgSwitch">
                                    </ol>
                                    <div class="carousel-inner" id="imgGrid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h1><strong th:text="${cosmetics.name}"></strong></h1>
                        <h2 style="color: #c4c8cc">—————————————————————————</h2>
                        <p></p>
                        <h2>种类：<span th:text="${cosmetics.cosType.name}"></span></h2>
                        <h2>价格：¥ <span th:text="${cosmetics.price}"></span></h2>
                        <h2>库存：<span th:text="${cosmetics.number}"></span></h2>
                        <h2>单位：<span th:text="${cosmetics.unit}"></span></h2>
                        <h2>简介：<span th:text="${cosmetics.introduce}"></span></h2>
                        <h2>最后更新日期：<span th:text="${#dates.format(cosmetics.updateDate, 'yyyy-MM-dd')}"></span></h2>
                        <h2 style="color: #c4c8cc">—————————————————————————</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="goAddOrder()"><i class="fa fa-check"></i> 购买</button>&nbsp;
            <button type="button" class="btn btn-sm btn-info" onclick="goAddCart()"><i class="fa fa-wrench"></i> 加入购物车</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i> 关闭</button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
	    var prefix = ctx + "admin/record";
        var cosmeticsInfo = [[${cosmetics}]];

        $(function() {
            //图片初始化
            $('#imgGrid').append('<img alt="image" style="height: 400px" className="img-responsive" src="'+ cosmeticsInfo.image +'">');
        });

        //打开添加购物车弹框
        function goAddCart(){
            var url = ctx + 'admin/cosmetics/goAddCart/'+ cosmeticsInfo.cosId;
            $.modal.open("填写数量", url);
        }

        //打开添加订单弹框
        function goAddOrder(){
            var url = ctx + 'admin/cosmetics/goAddOrder/'+ cosmeticsInfo.cosId;
            $.modal.open("填写数量", url);
        }
    </script>
</body>
</html>